<template>
	<view  :style="viewColor">
		<!-- 酒店预订 begin -->
		<view class="tab-panel-item" >
			<view class="flex flex-mar b-line">
				<view class="hotel-city text-ellipsis">{{form.address?form.address:'请开启定位权限'}}</view>
				<view class="flex-box hotel-text" @click="chooseLocation">
					我的附近
					<i class="icon iconfont icon-dingwei1"></i>
				</view>
			</view>
		
			<view class="b-line checkinout">
				<view class="firstSelect" style="width:100%;" @click="openDate">
					<view class="Date_lr" style="float:left;">
						<p>入住</p>
						<input class="ft-w700 text-16" :value="form.start_date?form.start_date:''" type="text" disabled />
					</view>
					<span class="calendar-days">
						共
						<span class="NumDate">{{form.day_count?form.day_count:''}}</span>
						晚
					</span>
					<view class="Date_lr" style="float:right;">
						<p>离店</p>
						<input  class="ft-w700 text-16" :value="form.end_date?form.end_date:''" type="text" disabled />
					</view>
				</view>
			</view>
		
			<view class="flex flex-mar b-line">
				<view class="flex-head">搜索</view>
				<view class="flex-box">
					<input type="text" v-model="form.keyword" class="flex-search" placeholder="名称/位置/品牌" />
				</view>
			</view>
		
		<!-- 	<view class="flex flex-mar b-line">
				<view class="flex-head">价格星级</view>
				<view class="flex-box"><input type="text" class="flex-search" placeholder="价格不限/星级不限" disabled/></view>
			</view> -->
		
			<view class="mt-15 mb-10">
				<view class="button-search" @click="submitHotel">
					<text class="text">酒店查询</text>
				</view>
			</view>
		</view>
		<!-- 酒店预订 end -->
		<uni-popup  ref="bindmobile" type="bottom" background-color="#fff">
			<view class="popup-header">
				<view class="popup-title">
					选择日期
				</view>
				<view @click="colseDate" class="popup-close1 iconfont icon-ic_close text-18">	</view>
			</view>
			<scroll-view :scroll-y="true" class="bg-white br-8"  style="height: 500px;padding-bottom: 100px;">
				
			 <calendar :is-show="true"  :start-date="startDate" :end-date="endDate" mode="2"  @callback="getDate" />
			</scroll-view>
		</uni-popup>				
	</view>
</template>

<script>
	import calendar from '@/components/mobile-calendar-simple/Calendar.vue'
	import Cache from '@/utils/cache';
	import { CITY_INFO ,FROM_LOC ,TO_LOC ,USER_LOCATION} from '@/config/cache'
	import { getCityInfo} from '@/api/api.js';
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import { getUserInfo } from '@/api/user.js';
	import { saveDingzhi } from "@/api/api.js"
	import { configMap, getCustomer } from "@/utils";
	import recommend from '@/components/recommend';
	import { mapGetters } from "vuex";
	let app = getApp();
export default {
	  

name: "tabScenic",
components:{ calendar ,},
 computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
data() {
    return {
		 startDate:'',
		 endDate:'',
		 form: {
			 address: '',
			 lng: '',
			 lat: '',
			 day_count: '',
			 start_date: '',
			 end_date: '',
			 keyword: ''
			 
		 }
    }
  },
  props: {
  	isOnShow: {
  		type: Boolean
  	} ,
  },
  watch: {
  
  	
  	isOnShow:{
  		handler(nVal,oVal){
  			console.log('nVal',nVal)
  			
  		},
  		immediate: true,
  		deep:true
  	}
  },
  mounted() {
	   const one = dayjs();
	  const tow = dayjs().add(1, 'day');

	  this.form.start_date = one.format('YYYY-MM-DD')
	   this.form.end_date = tow.format('YYYY-MM-DD')
	    this.form.day_count = 1;
	  // this.selectDayMd =  tow.format('MM月DD日')
	  // this.selectDayWeek =  util.getWeek(tow.day())
	  // this.form.go_time = this.selectDay;
	  // console.log(this.selectDay,this.selectDayMd,this.selectDayWeek)
	  	this.initValue()

	},
  methods: {
	  openDate(){
		  this.$refs.bindmobile.open()
	  },
	  colseDate(){
		  this.$refs.bindmobile.close()
	  },
	  getDate(e){
		console.log(e)
		this.form.start_date = e.startStr.dateStr;
		this.form.end_date = e.endStr.dateStr;
		this.form.day_count = e.dayCount;
		
		this.startDate = this.form.start_date;
		this.endDate =this.form.end_date;
		this.$refs.bindmobile.close()
	  },
	  chooseLocation() {
	  	let that = this;
	  	//#ifdef MP
	  	uni.authorize({
	  		scope: 'scope.userLocation',
	  		success(res) {
	  			//#endif
	  			uni.chooseLocation({
	  				success(res) {
	  					console.log(res)
	  					that.$set(that.form, 'address', res.name); //解决不及时更新的问题
						that.$set(that.form, 'lng', res.longitude);
						that.$set(that.form, 'lng', res.latitude);
	  				
	  				},
	  				fail(error) {
	  					console.error(error);
	  				}
	  			});
	  			//#ifdef MP
	  		},
	  		fail() {
	  			uni.showModal({
	  				content: '位置信息授权才能选择',
	  				success(res) {
	  					if (res.confirm) {
	  						uni.openSetting({
	  							success(res) {
	  								//console.log(res.authSetting);
	  							}
	  						});
	  					}
	  				}
	  			});
	  		}
	  	});
	  	//#endif
	  },
	  
	  initValue(){
	    var city = JSON.parse(Cache.get(CITY_INFO));
		var user_loc = JSON.parse(Cache.get(USER_LOCATION));
		this.address = city?city.name:'';
		this.form.address = city?city.name:'';
		this.form.lng = user_loc?user_loc.lng:'';
		this.form.lat = user_loc?user_loc.lat:'';
	  },
	  
	  submitHotel(){
		  console.log(this.form)
		  if (!this.form.start_date) {
		  	this.$util.Tips({
		  		title: '入住时间不能为空'
		  	})
		  	return false;
		  }
		  if (!this.form.end_date) {
		  	this.$util.Tips({
		  		title: '离店时间不能为空'
		  	})
		  	return false;
		  }
		  uni.navigateTo({
		  	url:'/pages/hotel/hotel_list?start_date='+this.form.start_date
			+'&end_date='+this.form.end_date
			+'&keyword='+this.form.keyword
			+'&day_count='+this.form.day_count
			+'&lng='+this.form.lng
			+'&lat='+this.form.lat
		  })
		 
	  },
   
  }
}
</script>

<style  lang="scss">
    .flex {
		display: flex;
		align-items: center;
		padding: 30rpx;
		position: relative;
	}
	
	.flex-box {
		flex: 1;
		min-width: 100px;
		font-size: 28rpx;
		color: #333;
	}
	.tab-panel-item {
		width: 100%;
	}
	
	
	.hotel-city {
		font-size: 34rpx;
		font-weight: bold;
	}
	
	.hotel-text {
		font-size: 32rpx;
		color: #666666;
		width: 100%;
		text-align: right;
		position: relative;
		padding-right: 40rpx;
	}
	
	.flex-mar {
		padding: 30rpx 0;
	}
	
	.Date_lr {
		width: 40%;
		text-align: center;
		line-height: 40rpx;
	}
	
	.calendar-days {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 28rpx;
		color: var(--view-theme);
		padding: 4rpx 16rpx;
		line-height: 40rpx;
		background-color: #fff;
		border-bottom: 2rpx solid var(--view-theme);
	}
	
	.checkinout {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		padding: 4rpx 0;
		display: -webkit-box;
		display: flex;
		background-color: #fff;
		margin: 0 40rpx;
	}
	
	.firstSelect p {
		line-height: 50rpx;
		color: #585858;
		font-size: 24rpx;
	}
	
	
	.flex-head {
		font-size: 30rpx;
		color: #222222;
		padding-left: 10rpx;
	}
	
	.flex-button-box {
		padding: 20rpx 40rpx;
	}
	
	.flex-button-btn {
		text-align: center;
		position: relative;
		border: none;
		pointer-events: auto;
		width: 100%;
		display: block;
		font-size: 38rpx;
		line-height: 88rpx;
		margin-top: 18rpx;
		background-color: #0bc66f;
		color: #fff;
		box-shadow: 0 4rpx 16rpx #6ee0ab;
		border-radius: 200rpx;
		height: 88rpx;
		outline: none;
	}
	
	.flex-button-btn:hover {
		outline: none;
	}
	
	.flex-search {
		color: #666666;
		font-size: 26rpx;
		padding-left: 10rpx;
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 40rpx;
		color: var(--view-theme);
	}
	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		border-bottom: 2rpx solid #e1e1e1;
		transform: scaleY(0.5);
		transform-origin: 0 100%;
	}
	
	
</style>